<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
	<link rel="shortcut icon" href="https://www.itsource.cn/img/logo_small.jpg">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>确认订单</title>

	<link type="text/css" rel="stylesheet" href="css/common.css">
	<link type="text/css" rel="stylesheet" href="css/flow.css">
	<!--整站改色 _start-->
	<link type="text/css" rel="stylesheet" href="css/color-style.css">
	<!--整站改色 _end-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<link rel="stylesheet" href="css/layer.css" id="layuicss-skinlayercss">
	<script type="text/javascript" src="js/jquery.method.js"></script>

	<script type="text/javascript" src="js/plugins/vue/dist/vue.js"></script>
	<script type="text/javascript" src="js/plugins/axios/dist/axios.js"></script>
	<script type="text/javascript" src="js/axios.common.js"></script>
	<link rel="stylesheet" href="js/jqueryAlert/alert.css">
	<script src="js/jqueryAlert/alert.js"></script>


	<script type="text/javascript">
		$(document).ready(function () {
			$(".SZY-SEARCH-BOX-TOP .SZY-SEARCH-BOX-SUBMIT-TOP").click(function () {
				if ($(".search-li-top.curr").attr('num') == 0) {
					var keyword_obj = $(this).parents(".SZY-SEARCH-BOX-TOP").find(".SZY-SEARCH-BOX-KEYWORD");

					var keywords = $(keyword_obj).val();
					if ($.trim(keywords).length == 0 || $.trim(keywords) == "请输入关键词") {
						keywords = $(keyword_obj).data("searchwords");
					}
					$(keyword_obj).val(keywords);
				}
				$(this).parents(".SZY-SEARCH-BOX-TOP").find(".SZY-SEARCH-BOX-FORM").submit();
			});
		});
	</script>
</head>

<body>
<div id="myBody">
	<div id="bg" class="bg" style="display: none;"></div>

	<div class="header-top">
		<div class="header-box">

			<!-- 站点 -->
			<!--站点 start-->
			<div class="SZY-SUBSITE">

			</div>
			<!--站点 end-->
			<font id="login-info" class="login-info SZY-USER-NOT-LOGIN">
				<a class="login color" href="http://user.ymcc.com:6003/login.html" target="_top">请登录</a>
				<a class="register" href="http://user.ymcc.com:6003/register.html" target="_top">免费注册</a>
			</font>
			<font id="login-info" class="login-info SZY-USER-ALREADY-LOGIN" style="display: none;">
				<em>
					<a href="user.html" target="_blank" class="color SZY-USER-NAME"></a>
					<!--欢迎您回来!-->
				</em>
				<a href="site/logout" data-method="post">退出</a>
			</font>

			<ul>
				<li>
					<a class="menu-hd home" href="http://course.ymcc.com:6002/index.html" target="_top">
						<i></i> 源码云课堂首页
					</a>
				</li>
				<li class="menu-item">
					<div class="menu">
						<a class="menu-hd myinfo" href="http://user.ymcc.com:6003/user.home.html" target="_blank">
							<i></i> 会员中心
							<b></b>
						</a>
					</div>
				</li>
				<li class="menu-item cartbox">
					<div class="menu">
						<a class="menu-hd cart" href="cart.html" target="_top">
							<i></i> 购物车
							<span class="SZY-CART-COUNT">0</span>
							<b></b>
						</a>
						<div id="menu-4" class="menu-bd cart-box-main">
							<span class="menu-bd-mask"></span>
							<div class="dropdown-layer">
								<div class="spacer"></div>
								<div class="dropdown-layer-con cartbox-goods-list">

									<!-- 正在加载 -->
									<div class="cart-type">
										<i class="cart-type-icon"></i>
									</div>

								</div>
							</div>
						</div>
					</div>
				</li>

				<li class="menu-item">
					<div class="menu">
						<a class="menu-hd we-chat" href="" target="_top">
							<i></i> 关注源码云课堂
							<b></b>
						</a>
						<div id="menu-5" class="menu-bd we-chat-qrcode">
							<span class="menu-bd-mask"></span>
							<a target="_top">
								<img src="img/test/mall_wx_qrcode_0.jpg" alt="官方微信">
							</a>
							<p class="font-14">关注官方微信</p>
						</div>
					</div>
				</li>

				<li class="menu-item">
					<div class="menu">
						<a href="" class="menu-hd site-nav" target="_blank">
							更多支持
							<b></b>
						</a>
						<div id="menu-7" class="menu-bd site-nav-main">
							<span class="menu-bd-mask"></span>
							<div class="menu-bd-panel">
								<div class="site-nav-con">

									<a href="article/info?id=38" target="_blank" title="新手上路">新手上路</a>

									<a href="article/info?id=38" target="_blank" title="支付方式">支付方式</a>

									<a href="article/list/3.html" target="_blank" title="配送服务">配送服务</a>

									<a href="article/list/4.html" target="_blank" title="售后服务">售后服务</a>

									<a href="article/info?id=38" target="_blank" title="商家合作">商家合作</a>

									<a href="list.html?cat_id=17" target="_blank" title="店铺街">店铺街</a>

								</div>
							</div>
						</div>
					</div>
				</li>

			</ul>
		</div>
	</div>


	<!-- 引入上方导航条文件 -->
	<div class="header">
		<div class="w990">
			<div class="logo-info">
				<a href="#" class="logo">
					<img src="./img/test/mall_logo_0.png">
				</a>
			</div>
			<div class="cart-progress">
				<ul>

					<li class="finish finish-01">
						<i>1</i>
						<span>
						<a href="#checkout.html">购买课程</a>
					</span>
						<b></b>
					</li>
					<li class="finish finish-02">
						<i>2</i>
						<span>确认订单</span>
						<b></b>
					</li>
					<li class="finish">
						<i>3</i>
						<span>付款</span>
						<b></b>
					</li>
					<li class="finish">
						<i>4</i>
						<span>支付成功</span>
						<b></b>
					</li>

				</ul>
			</div>
		</div>
	</div>

	<div class="content-bg">
		<div class="content-main w990">
			<div class="content-info">
				<!-- 所有店铺商品清单 -->
				<div class="goods-list border-line">
					<div class="main-content">
						<h2 class="title">商品清单</h2>
						<div class="order-goods">
							<!-- 根据店铺对商品进行拆单 每个table是一个店铺的商品 _star-->
							<table cellpadding="0" cellspacing="0" border="0" width="100%" class="order-goods-list">
								<tbody>
								<tr>
									<th class="goods-title">
										<div class="order-body">
											<div class="shop">
												<div class="shop-info">
															<span class="shop-icon">
										<img src="./img/test/shop-icon2.png">
									</span>
													<span class="shop-name">平台：</span>
													<a href="#shop/7.html" target="_blank" title="">源码云课堂</a>
													<span class="shop-customer">
										<!-- 客服 -->

										<a href="javascript:;" class="ww-light service-online" data-shop_id="7"><img
												src="./img/test/openim.png" width="20" height="20" border="0"
												alt="在线客服"></a>

									</span>
												</div>
											</div>
										</div>
									</th>
									<th class="goods-price">价格</th>
									<th class="goods-amount">时长(分钟)</th>
									<th class="goods-sum">观看截止</th>
									<th class="goods-postage">配送方式</th>
								</tr>
								<tr>
									<td colspan="4" class="goods-content">
										<table cellpadding="0" cellspacing="0" border="0" width="100%">
											<!-- 如果该商品有赠品，那么当前商品的tr的class="have-gift" _star-->
											<tbody>
											<tr class="goods_34 " v-for="courseDto in courses">
												<td class="goods-img">
													<a href="#254" title="" target="_blank" class="img">
														<img :src="courseDto.pic" width="50" height="50">
													</a>

												</td>
												<td class="goods-master">
													<p class="item-title">
														<a href="#254.html" target="_blank"
														   :title="courseDto.name">

															{{courseDto.name}}
														</a>
													</p>
													<div class="item-other-info">
														<div class="promo-logos"></div>
														<div class="item-icon-list">
															<div class="item-icons">

															</div>
														</div>
													</div>
												</td>
												<td class="goods-attr">
													<p class="sku-line">{{courseDto.gradeName}}</p>
												</td>
												<td style="width: 140px" cl优惠ass="goods-price second-color">
													￥{{courseDto.price}}元
													<span style="text-decoration: line-through;font-size: 12px;color: #999999">{{courseDto.priceOld}}元</span>
												</td>
												<td class="goods-amount">{{courseDto.totalMinute}}</td>
												<td class="goods-sum">
													<p class="sum second-color">{{new Date(courseDto.endTime).format("yyyy-MM-dd")}}</p>
												</td>
											</tr>
											<!-- 如果该商品有赠品，那么当前商品的tr的class="have-gift" _end-->
											</tbody>
										</table>
									</td>
									<td class="goods-postage">
										<div class="postage">
											<label>
												<input type="radio" name="" value="" checked="checked">
												<span>普通配送</span>
											</label>
											<select class="shipping-select" data-shop-id="7">
												<option value="0" selected="">在线发货</option>
											</select>
										</div>
									</td>
								</tr>
								<tr>
									<td colspan="2" class="goods-annex">
									</td>
									<td colspan="3" class="goods-bill" id="shop_count_7">
										<div class="bill">
											<div class="order-pay">
												合计
												<span>(无其他费用)</span> ：
												<strong class="second-color SZY-SHOP-ORDER-AMOUNT-7" data-shop-id="7">￥{{price}}
													元 | 优惠 {{oldPrice - price}} 元</strong>
											</div>
										</div>
									</td>
								</tr>
								</tbody>
							</table>
							<!-- 根据店铺对商品进行拆单 每个table是一个店铺的商品 _end-->

						</div>
					</div>
				</div>
				<!-- 平台红包 -->
				<!--
<div class="real-pay">
<span class="hd">应付总额：</span>
<span class="bd color SZY-ORDER-AMOUNT"></span>
</div>
-->
				<!-- <div class="obtain-point">
可获得积分：
<span>
    <strong></strong>
    点
</span>
</div> -->

				<!-- 发票信息 -->

				<!-- 支付方式 -->
				<div class="pay-type border-line">
					<div class="main-content">
						<h2 class="title">支付方式</h2>
						<div class="pay-type-content">
							<!-- 积分支付 start -->

							<!-- 积分支付 end -->

							<!-- 余额支付 start -->

							<!-- 余额支付后面显示的应付款信息 -->
							<p class="surplus-pay" id="balance_money_pay">
								剩余应付金额
								<strong class="second-color SZY-ORDER-MONEY-PAY">￥{{price}} 元</strong>
								请选择以下支付方式支付
							</p>

							<!-- 银行支付方式调用 start -->
							<div class="pay-all" id="pay_bank">

								<ul id="paylist" class="payment-tab">

									<!-- 货到付款特殊处理 -->

									<!-- 货到付款特殊处理 -->
									<li class="clearfix">
										<label>
											<input v-model="orderForm.payType" type="radio" id="pac_code_1"
												   name="pay_code" class="pay_code" value="1">
											<span class="payment-name">支付宝</span>
										</label>
									</li>

									<!-- 货到付款特殊处理 -->
									<li class="clearfix">
										<label>
											<input v-model="orderForm.payType" type="radio" id="pac_code_2"
												   name="pay_code" class="pay_code" value="3">
											<span class="payment-name">银联支付</span>
										</label>
									</li>

									<!-- 货到付款特殊处理 -->
									<li class="clearfix">
										<label>
											<input v-model="orderForm.payType" type="radio" id="pac_code_3"
												   name="pay_code" class="pay_code" value="2">
											<span class="payment-name">微信支付</span>
										</label>
									</li>

								</ul>

							</div>
							<!-- 银行支付方式调用 end -->
						</div>
					</div>
				</div>
				<!-- 提交订单 -->
				<div class="confirm-pay bottom" id="checkout_amount">

					<div class="total-count">
						<div class="total-count-pay">
							<div class="total-count-pay-info">
									<span class="first">
				订单总额：
				<span class="SZY-ORDER-AMOUNT ">￥{{price}} 元</span>
									</span>
							</div>
							<div class="total-count-pay-info">
									<span>
				课程总额：
				<span class="SZY-GOODS-AMOUNT">￥{{oldPrice}} 元</span>
									</span>
								<em>-</em>
								优惠：
								<span class="">￥{{oldPrice - price}}</span>
								</span>
								<em>-</em>
								<span>
				余额：
				<span class="SZY-ORDER-BALANCE">￥0.00</span>
									</span>
								<em>=</em>
								<span class="end second-color">
				应付款：
				<span class="SZY-ORDER-MONEY-PAY">￥{{price}}</span>
									</span>
							</div>
						</div>
					</div>
					<div class="submit-box fr">
						<!--<div class="price-box fl">
    <span>应付总额：</span>
    <span class="price color SZY-ORDER-AMOUNT">￥112.39</span>
</div>-->

						<div class="fr">
							<a href="javascript:void(0);" id="submitBtn"
							   @click="submitOrder" class="submit-btn gopay bg-color">提交订单</a>
						</div>
					</div>

				</div>
			</div>

			<!-- 新增地址弹框 -->
			<div class="bomb-box addr-box">
				<div class="box-title">使用新地址</div>
				<div class="box-oprate addr-box-oprate"></div>
				<div class="content-info" id="edit-address-div"></div>
			</div>

			<!-- 发票信息弹框 -->
			<div class="bomb-box invoice-box">
				<div class="box-title">发票信息</div>
				<div class="box-oprate invoice-box-oprate"></div>
				<div class="content-info">
					<div class="tab-nav">
						<ul>

							<li class="tab-nav-item  tab-item-selected" data-invoice-type="0"
								data-invoice-name="不开发票">
								不开发票
								<b></b>
							</li>

							<li class="tab-nav-item disabled " data-invoice-type="1" data-invoice-name="普通发票">
								普通发票
								<b></b>
							</li>

							<li class="tab-nav-item disabled " data-invoice-type="2" data-invoice-name="增值税发票">
								增值税发票
								<b></b>
							</li>

						</ul>
					</div>
					<!-- 普通税发票 _star -->

					<form id="invoice_type_0" action="#checkout.html" method="post" class="form-horizontal">
						<div class="act">
							<input type="button" value="保存发票信息" id="inv_submit">
							<input type="button" value="取消" class="m-l-10" id="inv_cancle">
						</div>
					</form>
					<!-- 增值税发票 _end -->

					<!-- 增值税发票 _end -->

					<!-- 增值税发票 _end -->
				</div>
			</div>
		</div>
	</div>

	<!-- 付款信息弹框 -->
	<div class="bomb-box payment-box">
		<div class="box-title">请付款</div>
		<div class="content-info">
			<p class="warning">
				<i></i>
				<span>请您在新打开的页面上完成付款。</span>
			</p>
			<p class="prompt">付款完成前请不要关闭此窗口</p>
			<p class="prompt">完成付款后请根据您的情况点击下面的按钮</p>
			<p class="btns">
				<a href="#checkout/result.html" class="pay_result">已完成付款</a>
				<a href="#checkout/result.html" class="m-l-10 pay_result">付款遇到问题</a>
			</p>
			<!-- <p class="back">
            <a href="/user/result/pay.html" title="返回选择其他的支付方式" class="color">&gt;&gt; 返回选择其他的支付方式</a>
        </p> -->
		</div>
	</div>

	<!-- 引入底部文件 -->

	<!-- 底部 _start-->

	<div class="site-footer">

		<div class="footer-related">

			<div class="footer-info">
				<div class="info-text">
					<!-- 底部导航 -->
					<p class="nav-bottom">

					</p>
					<p>
						Copyright 源码时代(www.itsource.cn) 版权所有
						<a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备88888888号</a>
					</p>
				</div>

			</div>

		</div>
	</div>
	<div id="payHtml"></div>
</div>
<script type="text/javascript" src="js/checkout.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/szy.cart.js"></script>
<script type="text/javascript" src="js/jquery.region.js"></script>
<!-- 表单验证 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.custom.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>


<script type="application/javascript">
	new Vue({
		el: "#myBody",
		data() {
			return {
				courses: [],
				totalAmount: 0,
				orderNo: "",
				orderForm: {
					courseIds: [],
					payType: "1",
					type: 0,	//0代表普通订单，1代表秒杀订单
					token: "",

				},
				oldPrice:0,
				price : 0,
			}
		},
		methods: {
			//下单方法
			submitOrder() {
				var _this = this;

				if (_this.orderForm.courseIds) {
					$("#submitBtn").attr("disabled", true);
					$("#submitBtn").html("正在下单...");
					let URI = "placeOrder";
					let param = {};

					//秒杀下单
					if (_this.orderNo && _this.orderForm.type && _this.orderForm.type == 1) {
						//秒杀请求
						URI = "killPlaceOrder";
						param = {
							payType: _this.orderForm.payType,
							orderNo: _this.orderNo
						}
					} else {
						param = _this.orderForm;
					}

					//公共参数
					param["token"] = _this.orderForm.token;

					//普通请求
					_this.$http.post("/order/courseOrder/" + URI, param).then(res => {
						if (res.data.success) {
							_this.toPay(res.data.data);

							//是否从购物车跳转过来,删除购物车
							let fromPage = api.getQueryVariable("from");
							if (fromPage == 'cart') {
								_this.$http.post("/cart/courseCart/remove/", _this.orderForm.courseIds).then(res => {
								})
							}
						} else {
							$.alert(res.data.message);
							$("#submitBtn").attr("disabled", false);
							$("#submitBtn").html("提交订单");
						}
					}).catch(error => {
						$.alert("下单失败[" + error.message + "]");
						$("#submitBtn").attr("disabled", false);
						$("#submitBtn").html("提交订单");
					})
				}

			},
			toPay(orderNo) {
				var _this = this;
				var interval = window.setInterval(function () {
					if (orderNo) {
						var param = {
							orderNo: orderNo,
							payType: _this.orderForm.payType,
							//支付完成跳转地址
							callUrl: "http://course.ymcc.com:6002/detail.html?courseId=" + _this.orderForm.courseIds[0]
						};
						//TODO : 根据订单号去查询一下支付单号了没有，如果没有好，再延迟3s中，再次查询一下。
						_this.$http.get("/pay/payOrder/checkPayOrder/" + orderNo).then(res => {
							if (res.data.success) {
								//关闭定时方法
								window.clearInterval(interval);
								_this.$http.post("/pay/payOrder/apply", param).then(res => {
									if (res.data.success) {
										document.write(res.data.data); //html
									} else {
										$.alert(res.data.message);
										$("#submitBtn").attr("disabled", false);
										$("#submitBtn").html("提交订单");
									}
								}).catch(error => {
									$.alert("支付申请失败[" + error.message + "]");
									$("#submitBtn").attr("disabled", false);
									$("#submitBtn").html("提交订单");
								})
							}
						}).catch(error => {

						})
					}
				}, 3000);

			},
			getCourse() {
				/**
				 if(this.orderForm.type && this.orderForm.type == 1){
				 this.$http.get("kill/killCourse/online/oneByOrder/"+this.orderNo).then(res=>{
				 let {success ,data,message} = res.data;
				 if(success){
				 this.courses = data.courseInfos;
				 this.totalAmount = data.totalAmount;
				 }else{
				 $.alert("订单数据加载失败["+message+"]");
				 }

				 }).catch(error => {
				 $.alert("订单数据加载失败["+error.message+"]");
				 })

				 return ;
				 }**/
				if (this.orderForm.courseIds) {
					console.log(this.orderForm.courseIds);
					//发送请求到后台获取数据
					this.$http.post("course/course/info", this.orderForm.courseIds).then(res => {
						console.log(res)
						let {success, data, message} = res.data;
						if (success) {
							this.courses = data;
							this.oldPrice = 0.0;
							this.price = 0.0;
							for (const index in this.courses) {
								this.price += this.courses[index].price
								this.oldPrice += this.courses[index].priceOld
							}
							console.log(this.oldPrice)
							console.log(this.price)
							this.totalAmount = data.totalAmount;
						} else {
							$.alert("订单数据加载失败[" + message + "]");
						}

					}).catch(error => {
						$.alert("订单数据加载失败[" + error.message + "]");
					})
				}
			}

		},
		mounted() {

			//处理防重复Token======================================================
			let token = api.getQueryVariable("token");
			if(!token){
				$.alert("非法请求，请重新购买");
				window.location.href="/index.html";
				return;
			}
			this.orderForm.token = token;

			//处理课程ID======================================================
			let courseId = api.getQueryVariable("courseId");
			if (!courseId) {
				$.alert("非法请求，请重新购买");
				window.location.href = "/index.html";
				return;
			}
			//多课程下单======================================================
			if (courseId.indexOf(",")) {
				let courseIds = courseId.split(",");
				for (let i = 0; courseIds.length > i; i++) {
					this.orderForm.courseIds.push(courseIds[i]);
				}
			} else {
				this.orderForm.courseIds.push(courseId);
			}
			//处理type，秒杀是1===============================================
			let type = api.getQueryVariable("type");
			//订单号，秒杀才有订单号
			let orderNo = api.getQueryVariable("orderNo");
			if (type && orderNo) {
				this.orderForm.type = parseInt(type);
				this.orderNo = orderNo;
			}

			//加载初始化数据======================================================
			this.getCourse();

		}
	});


</script>
</body>

</html>